<template>
  <div class="push">
    <div class="main">
      <div class="yaogan">
        <img src="@/assets/images/tuigan.png" alt="" />
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    yaoganX: {
      type: String,
      default: () => "0",
    },
  },
  data() {
    return {
      yokePosition: {
        x: "0",
      },
    };
  },
  watch: {
    yaoganX(newVal, oldVal) {
      this.yokePosition.x = parseFloat(newVal) * 30;
      this.yokePosition.x = Math.max(-30, this.yokePosition.x);
      document.documentElement.style.setProperty(
        "--yoke-rotation",
        `${this.yokePosition.x}deg`
      );
      console.log("this.yokePosition:", this.yokePosition.x);
    },
  },
};
</script>

<style lang="scss">
.push {
  width: 200px;
  height: 200px;
  border-image-source: url("../../../src/assets/images/gamebg.png");
  border-image-slice: 90 fill; /* 设置图像边框的分割方式 */
  border-image-width: 50px; /* 设置边框宽度 */
  border-image-outset: 10; /* 设置边框扩展区域的大小 */
  border-image-repeat: stretch; /* 设置图像边框的重复方式 */
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  .main {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .yaogan {
      width: 60px;
      height: 80px;
      position: relative;
      margin-bottom: -15px;
      z-index: 1;
      img {
        width: 100%;
        height: 80%;
        object-fit: contain;
        position: absolute;
        bottom: 0;
        transform: rotate(var(--yoke-rotation)) scaleX(-1);
        transform-origin: center bottom;
        transition: transform 0.1s ease-in-out;
      }
    }
    .bottom {
      width: 140px;
      height: 60px;
      position: relative;
      z-index: 2;
      background-image: url("../../assets/images/tuigandi.png");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  }
}
</style>
